import React, { useMemo } from 'react';
import { Link } from "react-router-dom";
import './style.less';


const Nav = (props) => {

  const navList = useMemo(() => {
    return [
      { name: '学术动态', path: '/academic', url: require('../../assests/img/nav1.png') },
      { name: '产品信息', path: '/productInfo', url: require('../../assests/img/nav2.png') },
      { name: '客户管理', path: '/customerManage', url: require('../../assests/img/nav3.png') },
      { name: '宁聚未来', path: '/ningJu', url: require('../../assests/img/nav4.png') },
    ]
  }, [])

  return <div className="navList-box">
    {navList.map(item => {
      return <Link className="navList-item" to={item.path} key={item.path}>
        <img src={item.url} alt=""/>
        <p>{item.name}</p>
      </Link>
    })}
  </div>
}


export default React.memo(Nav);